<template>
 <div class="tender1">
   <Hedar></Hedar>
	<div class="logoImg">
    </div>
   <Listnav></Listnav>
   <div class="mainCont">
   		<div class="mainLeft">
			  <div class="mainLeftT">
			  		<h3>投标保证金</h3>
			  		<div class="promiseS">¥<span>{{title1}}</span>元</div>
			  </div>
			  <div class="mainLeftC">
			  		<h3>投标方</h3>
			  		<div class="formS">
						  <p class="keepD"><span>投标单位 : </span><el-input v-model="unit" placeholder="请输入投标公司"></el-input></P>
						  <p class="keepD"><span>联系人 : </span><el-input v-model="Contacts" placeholder="请输入联系人姓名"></el-input></P>
						  <p class="keepD"><span>联系人电话 : </span><el-input v-model="ContactsNUM" placeholder="请输入联系人的联系方式"></el-input></P>
						  <p class="keepD"><span>推荐人 : </span><el-input v-model="Referee" placeholder="请输入推荐人姓名"></el-input></P>
						  <p class="keepD"><span>推荐人电话:</span> <el-input v-model="RefereeNUM" placeholder="请输入推荐人的联系方式"></el-input></P>
			  		</div>
			  </div>
			  <div class="mainLeftF">
			  		<h3>支付方式</h3>
			  		<div class="paymode">
			  			<button v-bind:class='{ "classA1" : isA,"classA2":!isA}' @click='toggle1($event)'></button>

			  			<button v-bind:class='{ "classB2" : isA,"classB1":!isA}' @click='toggle1($event)'></button>
			  		</div>
			  </div>
			  <button class="sureS" @click="btnpay()">确认并支付保证金</button>
   		</div>
   		<div class="mainright">
   		   <h3>此项目联系商</h3>
   		   <div class="companyS">
   		   		<img v-bind:src = item />
   		   		<p>{{Company}}</br>
   		   		联系电话：{{tel}}</p>
   		   </div>
   		</div>
   </div>
   <p class="ppp" v-html="zfbzf"></p>
   <Footers></Footers>
   <el-dialog
     title="请用微信扫描二维码完成支付"
     :visible.sync="dialogVisible"
     width="30%"
     top="30%"
     :before-close="handleClose">
     <div id="ddds"></div>
     <img :src=wximg style="display:block;margin:0 auto;width:200px;height:200px;">
     <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <router-link :to="{path:'/TenderhallList',query: {k:1}}" ><el-button type="primary" @click="dialogVisible = false" >支付完成</el-button></router-link >
  </span>
   </el-dialog>
 </div>
</template>

<script>

  import Footers from'@/components/Footers'
  import Listnav from "@/components/Listnav"
  import Hedar from'@/components/Hedar'
  export default {
    data () {
      return {
         item: require('@/assets/kplogo.png'),
         Company:"北京鲲鹏工程管理有限公司",
         tel:"87396162",
         moneyS:"1000.00",
         unit:"",
         Contacts:"",
         ContactsNUM:"",
         Referee:"",
         RefereeNUM:"",
         isA:false,
         title1:'',
         userId:'',
         tenderId:'',
         pay_Id:0,
         bidInfoid:null,
         dialogVisible: false,
        dialogVisible2: false,
         wximg:'',
         zfbzf:''



    }
    },
    methods: {
      handleClose(done) {
        done();
      },
      getQueryString(name){
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.href.split('?')[1].match(reg);
        if (r != null){
          return decodeURI(r[2]);
        }
        return null;
      },
  toggle1:function(e){
      	// this.isA = !this.isA;
      	// console.log($(e.currentTarget).index())
        if ( $(e.currentTarget).index()==0){
          this.isA = false
          this.pay_Id=0
        }else if ( $(e.currentTarget).index()==1){
          this.isA = true
          this.pay_Id=1
        }

      },
      setCookie: function (cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        console.info(cname + "=" + cvalue + "; " + expires);
        document.cookie = cname + "=" + cvalue + "; " + expires;
        console.info(document.cookie);
      },
      //获取cookie
      getCookie: function (cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') c = c.substring(1);
          if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
        }
        return "";
      },
      //清除cookie
      clearCookie: function () {
        this.setCookie("username", "", -1);

      },
      btnpay(){
        if(this.unit!==""&this.Contacts!==""&this.ContactsNUM!==""){
          let that=this
          let bd_url="http://www.wutongsd.com"

          $.ajax({
            type:"post",
            /* dateType:"json", */
            url:local1+"/api/bid/placeOrder",
            data:{
              tenderid: that.tenderId,
              bidInfoid:that.bidInfoid,
              comUserid: that.userId,
              bidCompany:that.unit,
              bidUser: that.Contacts,
              bidPhone: that.ContactsNUM,
              bidMail:that.RefereeNUM,
              referrer:that.Referee

            },
            success:function(data){
              if(data.code==200){
                var orderId=data.resultData.BidOrderId
                if(that.pay_Id==0){
                  $.ajax({
                    type:"post",
                    url:local1+"/api/wxpay/unifiedOrder",
                    data:{
                      orderId: orderId
                    },
                    success:function(data){
                      if(data.code==200){
                        console.log(data.resultData)
                        that.wximg="http://wut4.oss-cn-beijing.aliyuncs.com/"+data.resultData.imgUrl
                        that.dialogVisible = true
                      }else if(data.code==10001){
                        that.$message.error('订单已支付，请勿重复提交')
                      }else if(data.code==10005){
                        that.$message.error('订单不存在')
                      }else if(data.code==500){
                        that.$message.error('服务器故障，维修中》》》')
                      }


                    }
                  });
                }else if(that.pay_Id==1){
                  $.ajax({
                    type:"post",
                    url:local1+"/api/payment/tender/pay",
                    data:{
                      orderId: orderId
                    },
                    success:function(data){
                      if(data.code==200){
//                        console.log(data.resultData)
                        that.zfbzf=data.resultData
//                        const {href} = that.$router.resolve({name: 'Zhifubao', params:{ userId:data.resultData }})
                        const {href} = that.$router.resolve({path: '/Zhifubao', query:{ userId:data.resultData }})
                        window.open(href, '_blank')
                      }else if(data.code==500){
                        //alert("boom")
                      }


                    }
                  });
                }

              }else if(data.code==202){
                sessionStorage.clear()
                //清除cookie
                that.setCookie("login", "", -1);
                that.$message.error('登录过期请重新登录');

                this.$message.error('未登陆或登陆已过期，请重新登陆！');
              }

            }
          });
        }else{
          this.$message.error('请填写完整信息');
        }
      },
      lista(){
        this.title1=this.getQueryString("mony")
        this.userId=sessionStorage.getItem('userId')
        this.tenderId=this.getQueryString("tenderName")
        let uid=this.userId
        let that=this
        $.ajax({
          type:"get",
          url:local1+"/api/bid/bidInfo?com_userId="+uid,

          success:function(data){
            if(data.code==200){
              let bidfor=data.resultData.bidInfo
              that.unit=bidfor.bidCompany
              that.Contacts=bidfor.bidUser
              that.ContactsNUM=bidfor.bidPhone
              that.Referee=bidfor.referrer
              that.RefereeNUM=bidfor.bidMail
              that.bidInfoid=bidfor.id
              console.log(data)
            }

          }
        });
      }
    },
    mounted () {
        this.lista()
    },
    components: {
      Listnav,
      Footers,

      Hedar
    }
  }
</script>
<style scoped>
.logoImg{
  width:100%;
  height:120px;
  background:url(../assets/logobig1.png) no-repeat 0 0;
  overflow: hidden;
}
.logoImg .lOgin_search{
  width:490px;
  height:38px;
  margin:40px 0 0 282px;
}
.logoImg .lOgin_search input{
  width:408px;
  height:36px;
  background: #eaeaea;
  float:left;
  border:1px solid #ff8328;
}
.logoImg .lOgin_search span{
  width:80px;
  height:38px;
  line-height: 38px;
  background:#ff8328;
  float:left;
  color:#eff4fa;
}
.logoImg .lOgin_search span:hover{
  cursor: pointer;
}
.mainCont{
	width:98%;
    background:#fff;
    min-height:750px;
    margin:10px auto 0px;
    overflow: auto;
    zoom: 1;
}
.mainLeft{
	float:left;
	width:810px;
	min-height:730px;
	padding:20px 0 0 40px;
}
.mainright{
	float:left;
	width:340px;
	min-height:720px;
	padding:15px 20px;
	text-align:left;
}
.mainright h3{
	font-weight:900;
	font-size:26px;
}
.companyS{
	height:220px;
	width:300px;
	margin:45px 30px;
	overflow: auto;
    zoom: 1;
}
.companyS img{
	width:60px;
    display:block;
    float:left;

}
.companyS p{
	float:left;
	display:inline-block;
	width:200px;
	padding-left:25px;
	font-weight:900;
	height:38px;
	line-height:38px;
	font-size:16px;

}

.mainLeft>div>h3{
	text-align:left;
	height:60px;
	width:100%;
	font-weight:900;
	font-size:24px;
	padding-left:40px;
	line-height:60px;
}
.mainLeftT h3{
	background:url(../assets/qian.png) no-repeat 0px 20px;
}
.mainLeftC h3{
	background:url(../assets/biao.png) no-repeat 0px 20px;
}
.mainLeftF h3{
	background:url(../assets/ka.png) no-repeat 0px 22px;
}
.mainLeft>div>div{
	background:#f5f5f5;
	min-height:56px;
}
.promiseS{
	line-height:56px;
	font-size:19px;
}
.promiseS span{
	color:#da1b1b;
	margin:0 3px;
}
.formS{
	padding:10px;
}
.keepD{
	margin:10px auto;
	height: 50px;
}
.keepD span{
	display: inline-block;
	width:100px;
	text-align: right;
	margin-right:10px;
}
.keepD .el-input{
	display: inline-block;
	width:300px;
}
.paymode{
	height:90px;
	padding-top:30px;
}
.paymode button{
	height:50px;
	width:150px;
	margin:0 50px;
	border:0;
}
.paymode button:hover{
  cursor: pointer;
  border: 1px solid #ff7108;
}
.paymode .classA1{
	background:url(../assets/wecat.png) no-repeat;
}
.paymode .classA2{
	background:url(../assets/wecat2.png) no-repeat;
}
.paymode .classB1{
	background:url(../assets/zifub.png) no-repeat;
}
.paymode .classB2{
	background:url(../assets/zifub2.png) no-repeat;
}
.sureS{
	margin:30px;
	background:#ff8c37;
	width:300px;
	height:35px;
	color:#fff;
	border:0;
	border-radius:6px;
	font-size:16px;
}
  .sureS:hover{
    cursor: pointer;
  }
</style>
